<template>

  <el-container>
    <el-header>

      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" router
        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" active-background-color="light-blue">
        <el-menu-item>
          <img class="logo" src="@/assets/image/my_logo.png" alt="">
        </el-menu-item>
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="/login">职位</el-menu-item>
        <el-link type="info" @click="handlUser">{{ userId ? this.name : '请登录' }}</el-link>
      </el-menu>
    </el-header>
    <div class="carousel">
      <template>
        <el-carousel :interval="4000" type="card" height="300px">
          <el-carousel-item v-for="item in imgList" :key="item">
            <img class="img_carousel" :src="item" alt="">

          </el-carousel-item>
        </el-carousel>
      </template>
    </div>


    <el-main>
      <el-input class="input" placeholder="搜索职位信息" v-model="category" clearable>
        <el-button type="primary" slot="append" @click="this.getJobList">搜索一下</el-button>
      </el-input>
      <h2>热门职位</h2>
      <div class="content">
        <div class=" car-content" v-for="item in jobList" :key="item.id">
          <el-card shadow="hover">
            <div>
              <span class="workName">{{ item.name }}</span>
              <span class="salary">{{ item.galary }}</span>
            </div>
            <span class="companyName">{{ item.companyName }}</span>
            <div>
              <span class="bossName">{{ item.bossName }}</span>
              <span class="detail" @click="watchDetail(item.id)">查看详情</span>
            </div>
          </el-card>
        </div>
      </div>
      <el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page="this.currentPage"
        @prev-click="prevClick" @current-change="pagerClick" @next-click="nextClick">
      </el-pagination>
    </el-main>
  </el-container>
</template>

<script>
import Header from "@/components/Header";
import jobAPI from '@/api/jobApi'

export default {
  components: {
    Header
  },

  data() {
    return {
      userId: '',
      activeIndex: '1',
      name: '',
      jobList: [],
      pageSize: 12,
      category: '',
      currentPage: 1,
      total: 1,
      imgList: [
        require('@/assets/image/01.jpg'),
        require('@/assets/image/02.jpg'),
        require('@/assets/image/03.jpg'),
        ('https://img.bosszhipin.com/beijin/upload/image/20221122/13d50b1a41701a245cc5e854f66ca179.jpg'),
        'https://img.bosszhipin.com/beijin/upload/image/20220823/3f12149553704739d2b4dc7714c88b13.jpg',
        'https://img.bosszhipin.com/beijin/upload/image/20221201/81ce8efde3d1ae588a03c4b50a84b2db.jpg'

      ]
    }
  },
  mounted() {
    let data = this.$route.params.userId;

    const user = JSON.parse(localStorage.getItem('user_info'));
    if (user != null) {
      data = user.id
      this.name = user.userName;

      this.getUserInfo(data);
      this.getJobList();


    } else {
      this.$router.push({ path: '/login' })

    }


  },
  methods: {
    getUserInfo(id) {
      this.userId = id;


    },
    getJobList() {
 
      jobAPI.jobAPI.getListJob(this.currentPage, this.pageSize, this.category).then(res => {
        //    console.log(res.data.data.records)
        this.jobList = res.data.data.records
        this.total = res.data.data.total,
          this.currentPage = res.data.data.current
      });
    },

    handleSelect() {
      //  console.log('select')
    },
    watchDetail(e) {
      //   console.log(e)
      this.$router.push({ path: '/detail', query: { jobId: e } })
    },
    prevClick() {
      this.currentPage = this.currentPage - 1;
      this.getJobList();

    },
    pagerClick(page) {
      //   console.log("页码：", this.currentPage = page)
      this.getJobList();

    },
    nextClick() {
      //   console.log("下一页")
      this.currentPage = this.currentPage + 1;
      this.getJobList();

    },
    handlUser() {
      if (this.userId == '') {
        this.$router.push({ path: '/login' })
        return;
      }
      this.$router.push({ path: '/user', query: { userId: this.userId } })

    }
  },

}
</script>

<style lang="less" scoped>
.salary {
  float: right;
  color: red;
}

.img_carousel {
  height: 100%;
  width: 100%;
}


.bossName {
  font-size: small;
  margin: 2px;
}

.companyName {
  font-size: medium;
  margin: 2px;
}

.detail {
  position: relative;
  top: 80px;
  left: 10px;
  margin: 2px;
  float: right;
}

.workName {
  margin: 2px;
  max-width: 150px;
  font-size: large;
  display: block;
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap; //溢出不换行
}

.content {
  width: 90%;
  background-color: #dcdde1;
  margin: 0 auto;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;

}

.car-content {
  min-width: 30%;
  max-width: 30%;
  min-height: 180px;
  max-height: 180px;
  text-align: start;
  margin: 10px 0;
  padding: 5px;
  border-radius: 20px;
  overflow: hidden;
  line-height: normal;


}

.el-card {
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: 100%;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;

}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.logo {
  width: 100%;
  height: inherit;
}



.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.input {
  width: 60% !important;

}

.el-header {
  width: 100%;
  color: #333;
  text-align: center;
  line-height: 60px;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-link {
  float: right;
  margin-right: 20px;
  font-size: large;
  color: white;
  cursor: pointer;
  font-weight: bold;
}

.el-main {

  color: #333;
  text-align: center;

}

.el-link {
  float: right;
}

.input {

  width: auto;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.carousel {
  margin: 10px 0;
}
</style>